import React from 'react';
import ReactDom from 'react-dom';
import $ from 'webpack-zepto';
import OrderHeader from './view/header.js';
import OrderList from './view/list.js';
import OrderPay from './view/pay.js';
import OrderDetail from './view/detail.js';
import Util from '../common/util.js';


var type;
var scope;
export class Order extends React.Component{

    constructor(props) {
        super(props);
        type = !Util.getUrlParam('type') ? 'order' : Util.getUrlParam('type');
        this.state = {orderType : 'all'};
        scope = this;
    };

    headerChange(header){
        scope.setState({orderType : header});
    };

    order(){
        return (
            <div>
                <OrderHeader changeCallback={this.headerChange}></OrderHeader>
                <OrderList data={scope.state.orderType} appId={scope.props.appId}></OrderList>
            </div>
        );
    };

    buy(){
        return (
            <div>
                <OrderPay appId={scope.props.appId}></OrderPay>
            </div>
        );
    };

    detail(){
        return (
            <div>
                <OrderDetail appId={scope.props.appId}></OrderDetail>
            </div>
        );
    }

    render(){
        if(type == 'order') {
            return this.order();
        }else if(type == 'detail'){
            return this.detail();
        }else {
            return this.buy();
        }
    };
};

ReactDom.render(
    <Order appId={Util.appId()}></Order>,
    $('#order')[0]
);